<template>
  <div>
    <div>
      <AddWorkspaceUser
        :showModal="showModal"
        :usersData="usersData"
        :roleData="roleData"
        :workspaceData="workspaceData"
        :formData="formData"
        @handleSubmit="handleSubmit"
        v-can="['workspace.user.add']"
      />

      <Card :bordered="false" style="margin-top: 20px">
        <tables
          ref="tables"
          editable
          searchable
          v-model="tableData"
          :columns="columns"
          :remoteSearch="remoteSearch"
          @handleRemoteSearch="handleRemoteSearch"
          @on-edit="onEdit"
          @on-delete="onDelete"/>
        <Page style="margin-top: 12px"
              :total="total"
              size="small"
              :page-size="pageSize"
              @on-change="handleChange"
              show-total/>
      </Card>

      <DeleteModal
        :modalVisible="modalVisible"
        :modalLoading="modalLoading"
        :deleteId="deleteId"
        @handleDelete="handleDelete"
        @handleChangeVisible="handleChangeVisible"/>
    </div>
  </div>
</template>

<script>
  import Tables from '_c/tables'
  import DeleteModal from '_c/delete-modal'
  import AddWorkspaceUser from '@/view/workspace/component/user/add.vue'
  import {getWorkSpaceList, postWorkSpaceUser, getWorkSpaceUser, deleteWorkSpaceUser} from '@/api/workspace'
  import {users} from '@/api/user'
  import {roles} from '@/api/role'
  import Bus from '@/bus'

  export default {
    name: 'workspace-user',
    components: {
      Tables,
      DeleteModal,
      AddWorkspaceUser
    },
    mounted() {
      this.handleGetWorkSpaceUser()
      getWorkSpaceList().then(res => {
        this.workspaceData = res.data
      })
      users().then(res => {
        this.usersData = res.data
      })
      roles().then(res => {
        this.roleData = res.data
      })
    },
    data() {
      return {
        modalVisible: false,
        modalLoading: false,
        deleteId: 0,
        showModal: false,
        usersData: [],
        roleData: [],
        workspaceData: [],
        formData: {},
        remoteSearch: true,
        total: 0,
        page: 1,
        pageSize: 10,
        columns: [
          {title: '部门名', key: 'name'},
          {title: '用户', key: 'nick_name'},
          {title: '角色', key: 'role_name', hiddenSearch: true},
          {title: '邮箱', key: 'email', hiddenSearch: true},
          {
            title: '操作',
            key: 'handle',
            button: [
              (h, params, vm) => {
                return h('div', [
                  h('a', [
                    h('icon', {
                      props: {
                        color: '#B14949',
                        type: 'md-trash',
                        size: '20'
                      },
                      on: {
                        click: () => {
                          vm.$emit('on-delete', params.row)
                        }
                      },
                      directives: [{ name: "can", value: ["workspace.user.delete"] }]
                    })
                  ])
                ])
              }
            ]
          }
        ],
        tableData: []
      }
    },
    methods: {
      onEdit: function (params) {
        this.showModal = true
        this.handleType = '编辑部门'
        this.formData = {
          id: params.id,
          name: params.name,
          owner: params.owner_id,
          master: params.master_id,
        }
      },
      changeVisible: function (val) {
        this.showModal = val
      },
      onDelete: function (params) {
        this.modalVisible = true
        this.deleteId = params.id
      },
      handleChangeVisible: function (val) {
        this.modalVisible = val
      },
      handleDelete: function (id) {
        this.modalLoading = true
        deleteWorkSpaceUser({id}).then(res => {
          this.handleGetWorkSpaceUser()
          this.$Message.success(res.message)
        })
        setTimeout(() => {
          this.modalLoading = false
          this.modalVisible = false
        }, 2000)
      },
      handleSubmit: function (val) {
        postWorkSpaceUser(val).then(res => {
          this.$Message.success(res.message)
          this.handleGetWorkSpaceUser()
        })
        Bus.$emit('flashWorkSpace')
      },
      handleChange: function (val) {
        this.handleGetWorkSpaceUser({page: val, pageSize: this.pageSize})
      },
      handleGetWorkSpaceUser: function (param = {}) {
        getWorkSpaceUser(param).then(res => {
          this.tableData = res.data.list
          this.total = res.data.total
        })
      },
      //远程搜索
      handleRemoteSearch: function (param = {}) {
        if (param.search_key && param.search_value) {
          getWorkSpaceUser(param).then(res => {
            this.tableData = res.data.list
            this.total = res.data.total
          })
        } else {
          this.handleGetWorkSpaceUser()
        }
      },
    }
  }
</script>

<style>

</style>
